<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Bebas+Neue&family=Inconsolata&display=swap"
        rel="stylesheet">
    <title>Redeye Record</title>
    <link rel="stylesheet" href="redeye.css">
    <script src="redeye.js"></script>
</head>

<body>

    <header>
        <!-- the first block of the website -->
            <section id='titles'>
                <h2><a href='index.html'>REDEYE</a></h2>
                <h3>DANCE MUSIC SPECIALISTS SINCE 1992
                    <span id='hamburger' onclick="showHide('menu')">
                        <a href="javascript:void(0);"><i class="fa fa-bars"></i></a>
                    </span>
                </h3>
            </section>
    
            <nav id='menu'>
                <ul>
                    <li><a href='contact.html'>CONTACT</a></li>
                    <li><a href='support.html'>SUPPORT</a></li>
                    <li><a href='aboutus.html'>ABOUT US</a></li>
                    <li><a href=''>MY ACCOUNT</a></li>
                    <li><a href=''><i class='fa fa-search'></i></a></li>
                    <li><a href='cart.html'><i class="fas fa-shopping-cart"></i></a></li>
                </ul>
            </nav>
    </header>

    <main>
        <!-- The navigation bar -->
        <section class="navigation-wrap" >
            <ul class='navigation'>
                <li><a href="">All</a></li>
                <li><a href="">Genre<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">New Release<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">Sale<i class="fas fa-caret-down"></i></a></li>
                <li class='last-item'><a href="">Pre-orders<i class="fas fa-caret-down"></i></a></li>
            </ul>
        </section>
        <!-- breadcrumb -->
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li>Support</li>
        </ul>

        <!-- heading   -->
        <div class='container flex-box flex-wrap'>
            <div class='flex-1 m1 p1'>
                <h5 class="text-center p1" style="border-bottom:1px solid #C4CDC1;">How can we help you?</h5>
                <div class="search-wrap">
                    <i class='fa fa-search'></i>
                    <input type='text' class='form-input'>
                </div>   
                <p class="artist">You can also browse the topics on the right to find what you are looking for.</p>
            </div>
            <div class="questions flex-1 p1 m1 pc">
                <h6 class="text-center">Frequently Asked Questions</h6>
                <ul class="flex flex-wrap">
                    <li>
                        <h6 class="artist text-center">General</h6>
                        <p>• How does the Redeye reserve system work?</p>
                        <p>• I ordered a gift voucher, where is my code?</p>
                        <p>• I would like to cancel my order.</p>
                        <div class="more">View all questions</div>
                    </li>
                    <li>
                        <h6 class="artist text-center">Pre-orders</h6>
                        <p>• I have been waiting for a pre order to come in and the date keeps moving forward 2 weeks all the time, why?
                             </p>
                        <p>• How long will a pre order take to arrive?</p>
                        <div class="more">View all questions</div>
                    </li>
                    <li>
                        <h6 class="artist text-center">Reserve Orders</h6>
                        <p>• I need to ship my reserves, how do I do it?
                             </p>
                        <p>• I have placed a reserve order today but it is showing under the 'unavailable to ship' section on my account page, why?
                          </p>
                        <div class="more">View all questions</div>
                    </li>
                    <li>
                        <h6 class="artist text-center">Shipping</h6>
                      <p>• I have placed a reserve order, I need to change the shipping address.
                    </p>
                      <p>• My order has not arrived, what can I do? Am I able to track it please?  
                    </p>
                    <div class="more">View all questions</div>
                    </li>                  
                </ul>
            </div>
            <div class="question-list m m1">
                <a href="contact.html" class="flex-box">
                    <h6>General</h6>
                    <i class="fas fa-caret-down"></i>
                </a>
                <a href="contact.html" class="flex-box">
                    <h6>Pre-orders</h6>
                    <i class="fas fa-caret-down"></i>
                </a>
                <a href="contact.html" class="flex-box">
                    <h6>Reserve Orders</h6>
                    <i class="fas fa-caret-down"></i>
                </a>
                <a href="contact.html" class="flex-box">
                    <h6>Shipping</h6>
                    <i class="fas fa-caret-down"></i>
                </a>
            </div>
        </div>
    </main>


    <footer>
        <div class="container flex flex-wrap">
            <section class='words flex-1 flex-100'>
                <address>
                    Redeye Records Ltd., Unit 5,<br>
                    Cristal Business Centre, Knightsdale Rd,<br>
                    Ipswich IP1 4JJ<br>
                </address>
                <br><br>
                <strong>Copyright 2020 Redeye Record. A website by Eq.</strong>
            </section>
            <br>
            <section class='socials flex-1 flex-100'>
                <strong>Stay In Touch<strong>
                     <form action=''>
                         <input class="email" type="text" placeholder="Email Address">
                         <label class="email" for="email"><i class="fas fa-arrow-right"></i></label>
                         <br>
                         <input id="agree" type="checkbox">
                         <label for="agree">I agree to the privacy policy and terms and conditions.</label>
                     </form>
                     <p class='footer_icons'>
                         <i class="fab fa-facebook-f"></i>
                         <i class="fab fa-instagram"></i>
                         <i class="fab fa-twitter"></i>
                         <i class="fab fa-pinterest"></i>
                         <i class="fab fa-youtube"></i>
                         <i class="fa fa-envelope"></i>
                     </p>
            </section>
        </div>
    </footer>
</body>

</html>